<template>
  <div>
    <van-row class="nav" type="flex" justify="space-between" align="center">
      <van-col span="3">
        <van-icon name="arrow-left" />
      </van-col>
      <van-col size="20" span="6">
        <div>商品详情</div>
      </van-col>
      <van-col offset="11" span="2">
        <van-icon size="20" name="shopping-cart-o" />
      </van-col>
      <van-col span="2">
        <van-icon size="20" name="wap-nav" />
      </van-col>
    </van-row>
    <van-swipe
      :autoplay="3000"
      :style="{
        height: height * 0.25 + 'px',
      }"
    >
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img v-lazy="image" />
      </van-swipe-item>
    </van-swipe>

    <van-row>
      <van-col span="22">{{ product[0].name }}</van-col>
      <van-col span="2"><van-icon name="share" /></van-col>
    </van-row>
    <van-divider />
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
      <van-goods-action-icon icon="cart-o" text="购物车" />
      <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
      <van-goods-action-button type="warning" text="加入购物车" />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
  </div>
</template>

<script>
import Vue from "vue";
import { Lazyload } from "vant";
Vue.use(Lazyload);

export default {
  name: "ProductDetail",
  data() {
    return {
      height: window.innerHeight,
      images: [
        "https://img01.yzcdn.cn/vant/apple-1.jpg",
        "https://img01.yzcdn.cn/vant/apple-1.jpg",
        "https://img01.yzcdn.cn/vant/apple-1.jpg",
        "https://img01.yzcdn.cn/vant/apple-2.jpg",
      ],
      product: [
        {
          id: 1,
          name: "黑美人西瓜鲜美多汁2个起卖",
          price: "39.8",
          time: "2022-01-05",
          classfy: "水果",
          place: "陕西西安",
          season: "夏季",
          weight: "1000g",
          taste: "甜味",
          varieties: "黑美人西瓜",
          kucun: "9999",
          goods: ["新品上新", "掌柜推荐", "销量冠军"],
          pinglun: [
            {
              fen: "5",
              desc: "asdfghsdfghsdfg",
              shu: 4,
              specifications: "独立包装，1个装",
            },
          ],
        },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
.nav {
  height: 60px;
  line-height: 60px;
  background-color: #4bd863;
  color: white;
  padding: 0 0.3125rem;
}
</style>